<template>
  <div class="personal-container">
    <div class="person-msg">
      <div class="head-pic">
        <div class="pic">
          <img
            src="@/assets/szptImages/images/builderHeader.png"
            v-show="!avatarShow"
          />
          <img
            :src="routeUserData.data.avatar"
            alt="头像已丢失..."
            v-show="avatarShow"
          />
        </div>
      </div>
      <div class="user-msg">
        <div class="name">
          <div class="userName">
            <span>{{ routeUserData.data.userName }}</span>
            <span>
              <i class="el-icon-male" style="color: #00c3ff" v-show="sex"></i>
              <i
                class="el-icon-female"
                style="color: rgb(229, 49, 79)"
                v-show="!sex"
              ></i>
            </span>
          </div>
          <div class="editor-focus-container">
            <div
              class="editor-user-data"
              v-show="editorShow"
              @click="editorDialog()"
            >
              编辑
            </div>
            <div
              class="focus-status"
              :style="{
                color: focusFlag ? '#999' : '#00c3ff',
                border: focusFlag ? '2px solid #999' : '2px solid #00c3ff',
              }"
              @click="changeFocusFlag()"
              v-show="!editorShow"
            >
              {{ focusFlag ? "已关注" : "关注" }}
            </div>
          </div>
        </div>
        <div class="msg">
          <div class="userID">
            <span
              ><i class="el-icon-bell" style="color: #00c3ff"></i>
              {{ ` ID :  ` + routeUserData.data.userId }}</span
            >
          </div>
          <div class="ip">
            <i class="el-icon-position" style="color: #00c3ff"></i>
            {{ `  IP属地 : ` + routeUserData.data.loginIp }}
          </div>
          <div class="remark">
            <span>
              <i
                class="el-icon-document-copy"
                style="color: rgb(229, 49, 79)"
              ></i
              >个性签名：{{
                routeUserData.data.remark
                  ? routeUserData.data.remark
                  : "系统签名送给每个小可爱~"
              }}</span
            >
          </div>
        </div>
        <div class="parse-fans">
          <div class="item">
            <div>{{ countDTO.fansTotal ? countDTO.fansTotal : "0" }}</div>
            <div style="color: #999">粉丝</div>
          </div>
          <div class="item">
            <div>{{ countDTO.focusTotal ? countDTO.focusTotal : "0" }}</div>
            <div style="color: #999">关注</div>
          </div>
          <div class="item">
            <div>{{ countDTO.likeTotal ? countDTO.likeTotal : "0" }}</div>
            <div style="color: #999">获赞</div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-tabs
        :tab-position="tabPosition"
        style="height: auto"
        type="border-card"
      >
        <div></div>
        <el-tab-pane>
          <div slot="label" class="slot-test" name="mypost">
            <i class="el-icon-s-order slot-icon"></i
            ><span>{{ editorShow ? `个人发帖` : "发帖" }}</span>
          </div>
          <div
            class="person-container"
            v-if="fmtShowPrivate(privateForm.myPostPermissinon)"
          >
            <div class="person-post-container-title">发帖</div>
            <div
              class="person-post-container"
              v-if="personPostList.length ? true : false"
            >
              <!-- 一个帖子 -->
              <div
                class="A-Post"
                v-for="(item, index) in personPostList"
                :key="index"
              >
                <div class="person-post-container-main">
                  <postDemo :postData="item"></postDemo>
                </div>
                <div class="person-post-container-del">
                  <div
                    @click="delPersonPost(item.data.id)"
                    class="person-post-container-del-btn"
                    v-show="editorShow"
                  >
                    删除
                  </div>
                </div>
              </div>
              <div
                class="person-center-load-more"
                @click="personPostLoadMore()"
              >
                {{ presonPostNoneMore ? `加载更多...` : "没有更多数据了" }}
              </div>
            </div>
            <div
              class="person-post-container"
              v-if="!personPostList.length ? true : false"
            >
              <noneDataPage></noneDataPage>
            </div>
          </div>
          <div
            class="person-container"
            v-if="!fmtShowPrivate(privateForm.myPostPermissinon)"
          >
            <privatePage></privatePage>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <div slot="label" class="slot-test" name="mycollect">
            <i class="el-icon-star-on slot-icon"></i
            ><span>{{ editorShow ? `个人收藏` : "收藏" }}</span>
          </div>
          <div
            class="person-container"
            v-if="fmtShowPrivate(privateForm.mycollectPermissinon)"
          >
            <div class="person-post-container-title">收藏</div>
            <div
              class="person-post-container"
              v-if="personCollectList.length ? true : false"
            >
              <!-- 一个帖子 -->
              <div
                class="A-Post"
                v-for="(item, index) in personCollectList"
                :key="index"
              >
                <div class="person-post-container-main">
                  <postDemo :postData="item"></postDemo>
                </div>
              </div>
              <div
                class="person-center-load-more"
                @click="personCollectLoadMore()"
              >
                {{ personCollectNoneMore ? `加载更多...` : "没有更多数据了" }}
              </div>
            </div>

            <div
              class="person-post-container"
              v-if="!personCollectList.length ? true : false"
            >
              <noneDataPage></noneDataPage>
            </div>
          </div>
          <div
            class="person-container"
            v-if="!fmtShowPrivate(privateForm.mycollectPermissinon)"
          >
            <privatePage></privatePage>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <div slot="label" class="slot-test" name="myparse">
            <i class="el-icon-s-opportunity slot-icon"></i
            ><span>{{ editorShow ? `个人点赞` : "点赞" }}</span>
          </div>
          <div
            class="person-container"
            v-if="fmtShowPrivate(privateForm.myLikePermissinon)"
          >
            <div class="person-post-container-title">点赞</div>
            <div
              class="person-post-container"
              v-if="personLikeList.length ? true : false"
            >
              <!-- 一个帖子 -->
              <div
                class="A-Post"
                v-for="(item, index) in personLikeList"
                :key="index"
              >
                <div class="person-post-container-main">
                  <postDemo :postData="item"></postDemo>
                </div>
              </div>
              <div
                class="person-center-load-more"
                @click="personLikeLoadMore()"
              >
                {{ personLikeNoneMore ? `加载更多...` : "没有更多数据了" }}
              </div>
            </div>
            <div
              class="person-post-container"
              v-if="!personLikeList.length ? true : false"
            >
              <noneDataPage></noneDataPage>
            </div>
          </div>
          <div
            class="person-container"
            v-if="!fmtShowPrivate(privateForm.myLikePermissinon)"
          >
            <privatePage></privatePage>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <div slot="label" class="slot-test" name="myfans">
            <i class="el-icon-user-solid slot-icon"></i
            ><span>{{ editorShow ? `个人粉丝` : "粉丝" }}</span>
          </div>
          <div
            class="person-container"
            v-if="fmtShowPrivate(privateForm.myFocusPermissinon)"
          >
            <div class="person-post-container-title">粉丝</div>
            <div
              class="person-post-container"
              v-if="personFansList.length ? true : false"
            >
              <!-- 一个帖子 -->
              <div
                class="A-Post"
                v-for="(item, index) in personFansList"
                :key="index"
              >
                <div class="person-post-container-main">
                  <personDemo :personData="item"></personDemo>
                </div>
              </div>
              <div
                class="person-center-load-more"
                @click="personFansLoadMore()"
              >
                {{ personFansNoneMore ? `加载更多...` : "没有更多数据了" }}
              </div>
            </div>
            <div
              class="person-post-container"
              v-if="!personFansList.length ? true : false"
            >
              <noneDataPage></noneDataPage>
            </div>
          </div>
          <div
            class="person-container"
            v-if="!fmtShowPrivate(privateForm.myFocusPermissinon)"
          >
            <privatePage></privatePage>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <div slot="label" class="slot-test" name="myconcern">
            <i class="el-icon-s-custom slot-icon"></i
            ><span>{{ editorShow ? `个人关注` : "关注" }}</span>
          </div>
          <div
            class="person-container"
            v-if="fmtShowPrivate(privateForm.myFollowerPermissinon)"
          >
            <div class="person-post-container-title">关注</div>
            <div
              class="person-post-container"
              v-if="personFellowList.length ? true : false"
            >
              <!-- 一个帖子 -->
              <div
                class="A-Post"
                v-for="(item, index) in personFellowList"
                :key="index"
              >
                <div class="person-post-container-main">
                  <personDemo :personData="item"></personDemo>
                </div>
              </div>
              <div
                class="person-center-load-more"
                @click="personFellowLoadMore()"
              >
                {{ personFellowNoneMore ? `加载更多...` : "没有更多数据了" }}
              </div>
            </div>
            <div
              class="person-post-container"
              v-if="!personFellowList.length ? true : false"
            >
              <noneDataPage></noneDataPage>
            </div>
          </div>
          <div
            class="person-container"
            v-if="!fmtShowPrivate(privateForm.myFollowerPermissinon)"
          >
            <privatePage></privatePage>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="editorShow">
          <div slot="label" class="slot-test" name="mysetting">
            <i class="el-icon-s-tools slot-icon"></i
            ><span>{{ `     隐私设置` }}</span>
          </div>
          <div class="person-container">
            <div class="person-post-container-title">隐私设置</div>
            <div class="person-private-container">
              <!-- <div class="private-item">
                <div class="private-name">
                  <span>个人主页访问权限</span>
                </div>
                <div class="private-name-check">
                  <el-radio-group v-model="privateForm.personCenterPermissinon">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div> -->
              <div class="private-item">
                <div class="private-name">
                  <span>在个人中心展示我发布的帖子</span>
                </div>
                <div class="private-name-check">
                  <el-radio-group v-model="privateForm.myPostPermissinon">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="private-item">
                <div class="private-name">
                  <span>在个人中心展示个人收藏</span>
                </div>
                <div class="private-name-check">
                  <el-radio-group v-model="privateForm.mycollectPermissinon">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="private-item">
                <div class="private-name">
                  <span>在个人中心展示我的点赞</span>
                </div>
                <div class="private-name-check">
                  <el-radio-group v-model="privateForm.myLikePermissinon">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="private-item">
                <div class="private-name">
                  <span>在个人中心展示我关注的用户</span>
                </div>
                <div class="private-name-check">
                  <el-radio-group v-model="privateForm.myFocusPermissinon">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="private-item">
                <div class="private-name">
                  <span>在个人中心展示关注我的用户</span>
                </div>
                <div class="private-name-check">
                  <el-radio-group v-model="privateForm.myFollowerPermissinon">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <div class="private-submit">
              <div class="private-submit-btn" @click="privateSave()">
                保存修改
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <el-dialog
        title="编辑"
        :visible.sync="centerDialogVisible"
        width="40%"
        center
      >
        <el-form ref="form" :model="userForm" label-width="80px">
          <div class="upload-headpic-container">
            <div class="upload-headpic-container-word">用户头像</div>
            <div class="upload-headpic-container-btn">
              <el-upload
                class="avatar-uploader"
                action="szpt/file/uploadImage"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="userForm.avatar"
                  :src="userForm.avatar"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
          <div class="upload-userForm-container">
            <el-form-item label="用户名称">
              <el-input v-model="userForm.userName" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="用户密码">
              <el-input v-model="userForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="用户性别">
              <el-select v-model="userForm.sex" placeholder="请选择用户性别..">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户电话">
              <el-input v-model="userForm.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱">
              <el-input v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item label="个性签名">
              <el-input
                type="textarea"
                v-model="userForm.remark"
                maxlength="30"
                :show-word-limit="true"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upLoadEditorData()">提交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import personDemo from "@/components/szptPage/personDemo/index.vue";
import privatePage from "@/components/szptPage/privatePage/index.vue";
import { getUserMsg, getUserMsgByID } from "@/api/szpt/getUserMsg.js";
import { delPost } from "@/api/szpt/getPostList";
import { parse_collect_concern } from "@/api/szpt/parse";
import {
  getPostList,
  getStatusList,
  getFansList,
  getFellowList,
  updateUserData,
} from "@/api/szpt/personalCenter.js";
import noneDataPage from "@/components/szptPage/noneDataPage/index.vue";
import postDemo from "@/components/szptPage/postDemo/index.vue";
import { posTitelImg } from "@/api/szpt/postMsg";
import { BASE_URL } from "@/plateFormTag.js";
import {
  getPrivateSetting,
  savePrivateSetting,
  updatePrivateSetting,
} from "@/api/szpt/personalCenter";
// import { postMsgInit } from "@/utils/szptUtils/postMsgInit.js";
export default {
  name: "szptPersonalCenter",
  components: {
    personDemo,
    postDemo,
    noneDataPage,
    privatePage,
  },
  data() {
    return {
      // 打开弹出层
      centerDialogVisible: false,
      userForm: {
        userId: this.$route.query.id,
        avatar: "",
        userName: "",
        sex: "",
        phonenumber: "",
        email: "",
      },
      // 隐私表单
      privateForm: {
        // 个人中心主页权限
        personCenterPermissinon: true,
        // 我发布的帖子权限
        myPostPermissinon: true,
        // 我收藏的帖子权限
        mycollectPermissinon: true,
        // 我点赞的帖子权限
        myLikePermissinon: true,
        // 我关注的用户权限
        myFocusPermissinon: true,
        // 关注我的人的用户权限
        myFollowerPermissinon: true,
      },
      tabPosition: "left",
      // 是否默认头像
      avatarShow: false,
      sex: true,
      // 登录用户id
      loadUserID: "",
      //跳转录用用户id
      routeUserID: this.$route.query.id,
      // 登录用户数据
      loadUserData: {
        data: {},
      },
      // 关注状态
      focusFlag: false,
      // 跳转过来的用户数据
      routeUserData: {
        data: {
          avatar: "",
          userName: "",
          userId: "",
          loginIp: "",
          remark: "",
        },
      },
      countDTO: {
        fansTotal: "",
        focusTotal: "",
        likeTotal: "",
      },
      // 显示编辑按钮
      editorShow: true,
      // 用该标志判断该用户为登录用户还是其他用户
      userFlag: false,
      // 个人列表搜索参数
      personPostListForm: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$route.query.id,
      },
      personLikeListForm: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$route.query.id,
      },
      personCollectListForm: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$route.query.id,
      },
      personFansListForm: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$route.query.id,
      },
      personFellowListForm: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$route.query.id,
      },
      // 个人发帖数据列表
      personPostList: [],
      // 收藏列表
      personCollectList: [],
      // 点赞列表
      personLikeList: [],
      // 粉丝列表
      personFansList: [],
      // 关注列表
      personFellowList: [],
      // 个人发布列表没有更多数据
      presonPostNoneMore: true,
      // 收藏列表没有更多数据
      personCollectNoneMore: true,
      // 点赞没有更多数据
      personLikeNoneMore: true,
      // 粉丝没有更多数据
      personFansNoneMore: true,
      // 关注没有更多数据
      personFellowNoneMore: true,
    };
  },
  methods: {
    // 判断是否展示个人隐私状态
    fmtShowPrivate(Privatestatus) {
      if (this.editorShow) {
        // 当当前个人中心页面为登录用户时全部展示
        return true;
      } else {
        if (Privatestatus) {
          return true;
        } else {
          return false;
        }
      }
    },
    // 改变关注状态
    changeFocusFlag() {
      parse_collect_concern(this.routeUserID, "SZPT_SYSUSER_SYSUSER_FOCUS")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.focusFlag) {
              this.$message.success("已取消关注");
            } else {
              this.$message.success("关注成功!");
            }
            this.focusFlag = !this.focusFlag;
          } else {
            this.$message.error("状态更改失败!");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getloadUserData() {
      // 获取登录用户数据
      getUserMsg()
        .then((resp) => {
          if (resp.code === 200) {
            this.loadUserData = resp.data;
          }
        })
        .catch((err) => {
          console.log("ee", err);
        });
    },
    // 获取个人发布的帖子列表
    getPersonList() {
      this.$modal.loading("玩命加载中....");
      getPostList(
        this.personPostListForm.userId,
        this.personPostListForm.pageNum,
        this.personPostListForm.pageSize
      ).then((resp) => {
        if (resp.code === 200) {
          if (resp.data.list) {
            // 当没有数据的时候
            this.presonPostNoneMore = false;
            this.$modal.closeLoading();
          } else {
            if (resp.data.pageInfo) {
              this.personPostList = this.personPostList.concat(
                resp.data.pageInfo.list
              );
            }
            this.$modal.closeLoading();
          }
        }
      });
    },
    // 获取不同状态个人列表
    getStatusList(userId, pageNum, pageSize, status) {
      getStatusList(userId, pageNum, pageSize, status).then((resp) => {
        this.$modal.loading("玩命加载中.....");
        if (resp.code === 200) {
          if (status === "SZPT_SZPOST_SYSUSER_COLLECT") {
            if (resp.data.list) {
              // 收藏关系
              this.personCollectNoneMore = false;
              this.$modal.closeLoading();
            } else {
              if (resp.data.pageInfo) {
                this.personCollectList = this.personCollectList.concat(
                  resp.data.pageInfo.list
                );
              }
              this.$modal.closeLoading();
            }
          } else if (status === "SZPT_SZPOST_SYSUSER_LIKE") {
            if (resp.data.list) {
              // 点赞关系
              this.personLikeNoneMore = false;
              this.$modal.closeLoading();
            } else {
              if (resp.data.pageInfo) {
                this.personLikeList = this.personLikeList.concat(
                  resp.data.pageInfo.list
                );
              }
              this.$modal.closeLoading();
            }
          }
        }
      });
    },
    getFansListByID() {
      getFansList(
        this.personFansListForm.userId,
        this.personFansListForm.pageNum,
        this.personFansListForm.pageSize
      ).then((resp) => {
        this.$modal.loading("玩命加载中...");
        if (resp.code === 200) {
          if (resp.data.list && resp.data.list.length > 0) {
            // 获取粉丝列表
            this.personFansList = this.personFansList.concat(resp.data.list);

            this.$modal.closeLoading();
          } else {
            this.personFansNoneMore = false;
            this.$modal.closeLoading();
          }
        }
      });
    },
    getFellowListByID() {
      getFellowList(
        this.personFellowListForm.userId,
        this.personFellowListForm.pageNum,
        this.personFellowListForm.pageSize
      ).then((resp) => {
        this.$modal.loading("玩命加载中...");
        if (resp.code === 200) {
          if (resp.data.list && resp.data.list.length > 0) {
            // 获取粉丝列表
            this.personFellowList = this.personFellowList.concat(
              resp.data.list
            );
            this.$modal.closeLoading();
          } else {
            this.personFellowNoneMore = false;
            this.$modal.closeLoading();
          }
        }
      });
    },
    personPostLoadMore() {
      this.personPostListForm.pageNum = this.personPostListForm.pageNum + 1;
      this.getPersonList();
    },
    personCollectLoadMore() {
      this.personCollectListForm.pageNum =
        this.personCollectListForm.pageNum + 1;
      this.getStatusList(
        this.personCollectListForm.userId,
        this.personCollectListForm.pageNum,
        this.personCollectListForm.pageSize,
        "SZPT_SZPOST_SYSUSER_COLLECT"
      );
    },
    personLikeLoadMore() {
      this.personLikeListForm.pageNum = this.personLikeListForm.pageNum + 1;
      this.getStatusList(
        this.personLikeListForm.userId,
        this.personLikeListForm.pageNum,
        this.personLikeListForm.pageSize,
        "SZPT_SZPOST_SYSUSER_LIKE"
      );
    },
    personFansLoadMore() {
      this.personFansListForm.pageNum = this.personFansListForm.pageNum + 1;
      this.getFansListByID();
    },
    personFellowLoadMore() {
      this.personFellowListForm.pageNum = this.personFellowListForm.pageNum + 1;
      this.getFellowListByID();
    },
    beforeAvatarUpload(file) {
      this.$modal.loading("玩命加载中....");
      const options = {
        compressQualityFlag: true,
        saveOriginalQualityFlag: true,
        waterMarkFlag: true,
        OriginUrlPass: "",
        lowQuilUrlPass: "",
      };
      posTitelImg(file, options)
        .then((resp) => {
          if (resp.data) {
            options.OriginUrlPass =
              BASE_URL.lookThroughPicurl + resp.data.originalQualityPaths[0];
            options.lowQuilUrlPass =
              BASE_URL.lookThroughPicurl + resp.data.lowQualityPaths[0];
            // 将上传得到的图片地址返回给表单
            this.$modal.closeLoading();
            this.userForm.avatar = options.lowQuilUrlPass;
          } else {
            console.log("图片不存在！");
          }
        })
        .catch((err) => {
          console.log(err + "图片上传错误");
        });
    },
    // 通过导航栏路由id获取用户数据
    getUserMsgById() {
      this.$modal.loading("玩命加载中...");
      getUserMsgByID(this.routeUserID).then((resp) => {
        if (resp.code === 200) {
          this.routeUserData = resp.data;
          // 判断关注状态
          this.focusFlag = resp.data.actionFlagDTO.focusFlag;
          getUserMsg().then((response) => {
            // 加载已登录用户数据
            this.loadUserData = response.data;
            this.userid = this.loadUserData.data.userId;
            // 判断当前用户为已登录用户/其他用户
            this.editorShow = this.routeUserID === this.userid ? true : false;
            // 判断登录用户性别
            this.sex = this.routeUserData.data.sex === "1" ? true : false;
            this.countDTO = this.routeUserData.countDTO;
            if (this.routeUserData.data.avatar) {
              this.avatarShow = true;
            } else {
              this.avatarShow = false;
            }
            this.getPersonList();
            // 获取收藏列表;
            this.getStatusList(
              this.personCollectListForm.userId,
              this.personCollectListForm.pageNum,
              this.personCollectListForm.pageSize,
              "SZPT_SZPOST_SYSUSER_COLLECT"
            );
            // 获取点赞列表
            this.getStatusList(
              this.personLikeListForm.userId,
              this.personLikeListForm.pageNum,
              this.personLikeListForm.pageSize,
              "SZPT_SZPOST_SYSUSER_LIKE"
            );
            // 获取粉丝列表
            this.getFansListByID();
            this.getFellowListByID();
            this.$modal.closeLoading();
          });
        }
      });
    },
    delPersonPost(postId) {
      // 根据id删除个人帖子
      this.$modal.confirm("确认删除吗？删除后不可恢复！").then(() => {
        delPost(postId)
          .then((resp) => {
            if (resp.code === 200) {
              this.$message.success("删除成功！");
              this.getPersonList();
            }
          })
          .catch((err) => {
            this.$message.error("删除失败！");
          });
      });
    },
    editorDialog() {
      this.userForm = this.routeUserData.data;
      this.centerDialogVisible = true;
      console.log("用户数据", this.userForm);
    },
    upLoadEditorData() {
      this.$modal.loading("玩命加载中.....");
      // console.log("用户编辑了个人信息", this.form);
      updateUserData(this.userForm)
        .then((resp) => {
          if (resp.code === 200) {
            // this.getUserMsgById();
            this.centerDialogVisible = false;
            this.$modal.closeLoading();
          }
        })
        .catch((err) => {});
    },
    // 获取个人隐私配置
    getPrivate() {
      const privateFormSet = {
        // 个人中心主页权限
        personCenterPermissinon: true,
        // 我发布的帖子权限
        myPostPermissinon: true,
        // 我收藏的帖子权限
        mycollectPermissinon: true,
        // 我点赞的帖子权限
        myLikePermissinon: true,
      };
      getPrivateSetting(this.$route.query.id)
        .then((resp) => {
          if (resp.code === 200) {
            this.getDicts("person_center_private_dict").then((response) => {
              const privateSetting = response.data;
              if (
                privateSetting instanceof Array &&
                privateSetting.length > 0
              ) {
                privateSetting.forEach((Item) => {
                  if (Item.dictLabel === "personCenterPermissinon") {
                    privateFormSet.personCenterPermissinon = JSON.parse(
                      Item.dictValue
                    );
                  } else if (Item.dictLabel === "myPostPermissinon") {
                    privateFormSet.myPostPermissinon = JSON.parse(
                      Item.dictValue
                    );
                  } else if (Item.dictLabel === "mycollectPermissinon") {
                    privateFormSet.mycollectPermissinon = JSON.parse(
                      Item.dictValue
                    );
                  } else if (Item.dictLabel === "myLikePermissinon") {
                    privateFormSet.myLikePermissinon = JSON.parse(
                      Item.dictValue
                    );
                  } else if (Item.dictLabel === "myFocusPermissinon") {
                    privateFormSet.myFocusPermissinon = JSON.parse(
                      Item.dictValue
                    );
                  } else if (Item.dictLabel === "myFollowerPermissinon") {
                    privateFormSet.myFollowerPermissinon = JSON.parse(
                      Item.dictValue
                    );
                  }
                });
                this.privateForm = privateFormSet;
                // 这里判断是否为第一次保存数据
                if (resp.data) {
                  if (resp.data.content) {
                    this.privateForm = { ...JSON.parse(resp.data.content) };
                  }
                }
              }
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 保存用户隐私
    privateSave() {
      let privateData = {
        entityId: this.$route.query.id,
        content: this.privateForm,
      };
      getPrivateSetting(this.$route.query.id)
        .then((response) => {
          if (response.code === 200 && !response.data) {
            savePrivateSetting(privateData).then((resp) => {
              this.$message.success("保存成功！");
            });
          } else if (response.code === 200 && response.data) {
            privateData.id = response.data.id;
            updatePrivateSetting(privateData).then((resp) => {
              if (resp.code === 200) {
                this.$message.success("修改成功！");
              }
            });
          }
        })
        .catch((err) => {
          this.$message.error("修改失败！");
          console.log(err);
        });
    },
  },
  mounted() {
    // 通过id获取用户数据
    this.getUserMsgById();
    this.getPrivate();
  },
};
</script>

<style lang="scss">
.el-tabs--left {
  background-color: rgb(247, 248, 252);
  border: none;
  box-shadow: none;
  border-radius: 10px;
  overflow: hidden;
  .el-tabs__item {
    .is-left {
      text-align: center;
      height: 80px;
      line-height: 50px;
      display: block;
      color: #00c3ff;
      font-weight: bold;
      background-color: yellow;
      box-shadow: none;
    }
  }
}
.personal-container {
  width: 100%;
  height: auto;
  .person-msg {
    padding: 10px;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    .head-pic {
      width: 15%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .pic {
        width: 150px;
        height: 150px;
        border-radius: 75px;
        overflow: hidden;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
    }
    .user-msg {
      width: 85%;
      height: 100%;
      .name {
        height: 50px;
        line-height: 50px;
        .userName {
          float: left;
          color: #333;
          font-weight: bold;
          font-size: 20px;
        }
        .editor-focus-container {
          width: 100px;
          height: 50px;
          float: right;
          margin-right: 20px;
          margin-top: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          .editor-user-data,
          .focus-status {
            float: right;
            width: 100%;
            height: 80%;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid #00c3ff;
            color: #00c3ff;
            text-align: center;
            font-weight: bold;
            line-height: 40px;
            cursor: pointer;
          }
        }
      }
      .msg {
        height: 80px;
        .userID {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #999;
        }
        .remark {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #666;
        }
        .ip {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #666;
        }
      }
      .parse-fans {
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: flex-start;
        border-top: 1px solid #ececec;
        .item {
          min-width: 80px;
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  height: 60px;
  line-height: 60px;
}
.person-container {
  width: 100%;
  min-height: 500px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: -15px;
  margin-left: 10px;
  background-color: #ffffff;
  .person-post-container-title {
    width: 100%;
    height: 40px;
    padding-left: 10px;
    line-height: 40px;
    color: #333;
    //background-color: red;
    border-bottom: 1px solid #ececec;
  }
  .person-post-container {
    width: 100%;
    height: auto;
    min-height: 400px;

    .A-Post {
      display: flex;
      padding: 0 10px 0 0;
      overflow: hidden;
      border-bottom: 1px solid #ececec;
      .person-post-container-main {
        width: 95%;
      }
      .person-post-container-del {
        width: 5%;
        height: 100%;
        display: flex;
        align-items: center;
        .person-post-container-del-btn {
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
          color: #999;
        }
        .person-post-container-del-btn:hover {
          color: red;
        }
      }
    }
    .person-center-load-more {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #00c3ff;
      cursor: pointer;
      text-align: center;
    }
  }
  .container {
    width: 100%;
    height: auto;
  }
  .person-private-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    .private-item {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: flex-start;
      overflow: hidden;
      flex-wrap: nowrap;
      .private-name {
        width: 60%;
        height: 100%;
        padding-left: 20px;
        color: #666;
        text-align: left;
      }
      .private-name-check {
        padding-right: 20px;
        width: 40%;
        height: 100%;
        text-align: right;
      }
    }
  }
  .private-submit {
    margin-top: 30px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    .private-submit-btn {
      width: auto;
      height: 100%;
      line-height: 40px;
      padding: 0 20px;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
      background-color: #409eff;
      color: white;
    }
    .private-submit-btn:hover {
      background-color: #00c3ff;
    }
  }
}

.el-tabs__nav-scroll {
  background-color: #ffffff;
  overflow: hidden;
}
.slot-test {
  width: 200px;
  font-weight: bold;
  text-align: left;
  padding-left: 15%;
  font-size: 17px;
  .slot-icon {
    font-size: 22px;
  }
}
.upload-headpic-container {
  padding: 10px;
  width: auto;
  height: auto;
  .upload-headpic-container-word {
    color: #666;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .upload-headpic-container-btn {
    padding-left: 70px;
  }
}
.upload-userForm-container {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
